<template>
  <div class="login-account">
    <el-form
      :model="accountForm"
      :label-width="store.state.language === 'en' ? '80px' : '60px'"
      label-position="left"
      ref="accountLoginRef"
    >
      <el-form-item
        :label="$t('login.account')"
        prop="name"
        :rules="[
          {
            required: true,
            message: $t('verify.accountNameRequired'),
            trigger: 'blur'
          }
        ]"
      >
        <el-input v-model="accountForm.name" />
      </el-form-item>
      <el-form-item
        :label="$t('login.password')"
        prop="password"
        :rules="[
          {
            required: true,
            message: $t('verify.accountPwdRequired'),
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          type="password"
          show-password
          v-model="accountForm.password"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { reactive, ref, defineExpose } from 'vue'
import type { IAccountRuleForm } from '../types'
import type { FormInstance } from 'element-plus'
import { localCache } from '@/cache'
const store = useStore()
const accountLoginRef = ref<FormInstance>()
const accountForm = reactive<IAccountRuleForm>({
  name: localCache.getItem('name') ?? '',
  password: localCache.getItem('password') ?? ''
})
const loginAction = (isRemPwd: boolean) => {
  accountLoginRef.value?.validate((valid) => {
    if (valid) {
      if (isRemPwd) {
        localCache.setItem('name', accountForm.name)
        localCache.setItem('password', accountForm.password)
      } else {
        localCache.removeItem('name')
        localCache.removeItem('password')
      }
      store.dispatch('login/loginAccountAction', { ...accountForm })
    }
  })
}
defineExpose({
  loginAction
})
</script>

<style lang="less" scoped></style>
